<template>
  <div class="home">
    <!-- 顶部动态标题 -->
    <div class="header-title">
      <h1 class="title-effect">
        <span>泉</span>
        <span>州</span>
        <span>文</span>
        <span>旅</span>
      </h1>
      <p class="slogan">半城烟火半城仙 · 海上丝路起点</p>
    </div>

    <!-- 动态轮播图区域 -->
    <div class="banner-section">
      <div class="banner-container" ref="bannerRef">
        <!-- 轮播图容器 -->
        <div 
          class="banner-list" 
          :style="{ transform: `translateX(${-currentIndex * bannerWidth}px)` }"
        >
          <div 
            v-for="(item, index) in bannerList" 
            :key="item.id" 
            class="banner-item"
            @mouseenter="pauseAutoPlay"
            @mouseleave="resumeAutoPlay"
          >
            <img 
              :src="item.image" 
              :alt="item.title" 
              class="banner-image"
            >
            <div class="banner-info">
              <h3>{{ item.title }}</h3>
              <p>{{ item.desc }}</p>
            </div>
          </div>
        </div>

        <!-- 轮播导航按钮 -->
        <div class="banner-controls">
          <button @click="prevBanner" class="control-btn left">&lt;</button>
          <button @click="nextBanner" class="control-btn right">&gt;</button>
        </div>

        <!-- 分页圆点 -->
        <div class="dot-nav">
          <span 
            v-for="(item, index) in bannerList" 
            :key="index" 
            :class="{ active: currentIndex === index }"
            @click="changeBanner(index)"
          ></span>
        </div>
      </div>
    </div>

    <!-- 热门景点推荐（带3D翻转效果） -->
    <section class="hot-spots">
      <h2>世遗景点 · 打卡指南</h2>
      <div class="spots-grid">
        <div 
          v-for="spot in hotSpots" 
          :key="spot.id" 
          class="spot-card"
          @mouseenter="handleSpotHover(spot, true)"
          @mouseleave="handleSpotHover(spot, false)"
        >
          <div class="spot-card-inner">
            <div class="spot-front">
              <img :src="spot.image" :alt="spot.name" class="spot-image">
              <h3>{{ spot.name }}</h3>
            </div>
            <div class="spot-back">
              <p>{{ spot.desc }}</p>
              <div v-if="spot.isHeritage" class="heritage-badge">
                世界遗产<br>{{ spot.heritageYear }}年入选
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 文化活动时间轴 -->
    <section class="cultural-events">
      <h2>近期文化活动</h2>
      <div class="events-timeline">
        <div class="timeline-line"></div>
        <div 
          v-for="(event, index) in culturalEvents" 
          :key="event.id" 
          class="event-card"
          :style="{ left: `${(index * 100) / (culturalEvents.length || 1)}%` }"
        >
          <div class="event-marker"></div>
          <div class="event-content">
            <h3>{{ event.title }}</h3>
            <div class="event-date">
              <span class="day">{{ event.date.split('-')[2] }}</span>
              <span class="month">{{ getMonthCN(event.date.split('-')[1]) }}</span>
              <span class="year">{{ event.date.split('-')[0] }}</span>
            </div>
            <p>地点：{{ event.location }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部文化水印 -->
    <div class="watermark">
      <img src="https://via.placeholder.com/200x100?text=泉州南音·非遗符号" alt="文化水印">
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue';

// 轮播图数据（新增描述字段）
const bannerList = ref([
  { 
    id: 1, 
    title: '泉州古城', 
    image: 'https://youimg1.c-ctrip.com/target/01024120006426ut7DF55_W_10000_1200.jpg?proc=autoorient',
    desc: '宋元中国的世界海洋商贸中心核心区'
  },
  { 
    id: 2, 
    title: '开元寺', 
    image: 'https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%275rOJ5bee5ZOq6YeM55qE5pmv54K55piv5pyJ5LiJ5qC55p%2Bx5a2Q55qEXzE3MzEyNzg5MTMuMDExMDYwMg%3D%3D%27/0.png',
    desc: '东南沿海最大佛教寺院，东西塔为世遗标志'
  },
  { 
    id: 3, 
    title: '清源山', 
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.7fb00b67fc5b10c0763461c403af01be?rik=upyegH5cX%2bYujg&riu=http%3a%2f%2fwww.ctnews.com.cn%2ffj%2fpic%2f2023-02%2f24%2f137579_12a1bead-24c9-440a-a67a-3f4b6bfe154f.jpg&ehk=I0HmhQOLT9yA0Xan6BvOpHZjQLBHLhdgQbdr50Eo4dk%3d&risl=&pid=ImgRaw&r=0',
    desc: '老君岩造像所在，被誉为“闽海蓬莱第一山”'
  }
]);

// 热门景点数据（新增世遗标识）
const hotSpots = ref([
  { 
    id: 1, 
    name: '开元寺', 
    desc: '千年古刹，闽南佛教圣地', 
    image: 'https://youimg1.c-ctrip.com/target/01024120006426ut7DF55_W_10000_1200.jpg?proc=autoorient',
    isHeritage: true,
    heritageYear: 2021
  },
  { 
    id: 2, 
    name: '清源山', 
    desc: '泉州八景之一，自然人文景观', 
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.7fb00b67fc5b10c0763461c403af01be?rik=upyegH5cX%2bYujg&riu=http%3a%2f%2fwww.ctnews.com.cn%2ffj%2fpic%2f2023-02%2f24%2f137579_12a1bead-24c9-440a-a67a-3f4b6bfe154f.jpg&ehk=I0HmhQOLT9yA0Xan6BvOpHZjQLBHLhdgQbdr50Eo4dk%3d&risl=&pid=ImgRaw&r=0',
    isHeritage: true,
    heritageYear: 2021
  },
  { 
    id: 3, 
    name: '西街', 
    desc: '千年古街，文化遗产', 
    image: 'https://p6.itc.cn/q_70/images01/20231218/311e7bb92374421c96760609b6c68c99.jpeg',
    isHeritage: false
  }
]);

// 文化活动数据（优化日期格式）
const culturalEvents = ref([
  { 
    id: 1, 
    title: '泉州木偶戏表演', 
    date: '2024-03-15', 
    location: '泉州木偶剧院'
  },
  { 
    id: 2, 
    title: '南音演奏会', 
    date: '2024-03-20', 
    location: '泉州南音宫'
  },
  { 
    id: 3, 
    title: '闽南文化节', 
    date: '2024-04-01', 
    location: '泉州古城区'
  }
]);

// 轮播图控制变量
const currentIndex = ref(0);
const bannerWidth = ref(0);
const autoPlayTimer = ref<number | null>(null);
const isAutoPlaying = ref(true);

// 生命周期钩子：初始化轮播图
onMounted(() => {
  setBannerWidth();
  startAutoPlay();
  window.addEventListener('resize', setBannerWidth);
});

// 计算属性：获取月份中文名
const getMonthCN = (month: string) => {
  const months = ['一月', '二月', '三月', '四月', '五月', '六月',
                  '七月', '八月', '九月', '十月', '十一月', '十二月'];
  return months[parseInt(month) - 1];
};

// 方法：设置轮播图宽度
const setBannerWidth = () => {
  const bannerRef = document.querySelector('.banner-list') as HTMLElement;
  if (bannerRef) {
    bannerWidth.value = bannerRef.offsetWidth;
  }
};

// 方法：自动播放
const startAutoPlay = () => {
  if (isAutoPlaying.value && bannerList.value.length > 1) {
    autoPlayTimer.value = setInterval(() => {
      nextBanner();
    }, 8000);
  }
};

// 方法：暂停自动播放
const pauseAutoPlay = () => {
  isAutoPlaying.value = false;
  if (autoPlayTimer.value) clearInterval(autoPlayTimer.value);
};

// 方法：恢复自动播放
const resumeAutoPlay = () => {
  isAutoPlaying.value = true;
  startAutoPlay();
};

// 方法：切换上一张
const prevBanner = () => {
  currentIndex.value = (currentIndex.value - 1 + bannerList.value.length) % bannerList.value.length;
};

// 方法：切换下一张
const nextBanner = () => {
  currentIndex.value = (currentIndex.value + 1) % bannerList.value.length;
};

// 方法：点击圆点切换
const changeBanner = (index: number) => {
  currentIndex.value = index;
};

// 景点卡片悬停效果
const handleSpotHover = (spot: any, isHover: boolean) => {
  spot.hover = isHover;
};

// 监听currentIndex变化，重置自动播放
watch(currentIndex, () => {
  if (autoPlayTimer.value) clearInterval(autoPlayTimer.value);
  startAutoPlay();
});
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans CJK SC', sans-serif;
}

.home {
  max-width: 1920px;
  margin: 0 auto;
  background: #f8f9fa url('https://via.placeholder.com/1920x100?text=水波纹底纹') repeat;
}

/* 顶部标题动画 */
.header-title {
  text-align: center;
  padding: 80px 20px;
  background: linear-gradient(to bottom, #e0f3ff, #ffffff);
}

.title-effect {
  font-size: 4rem;
  color: #004d7a;
  display: inline-block;
}

.title-effect span {
  display: inline-block;
  animation: bounceIn 1s ease-out both;
  animation-delay: calc(var(--index) * 0.1s);
}

@keyframes bounceIn {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.slogan {
  font-size: 1.2rem;
  color: #666;
  margin-top: 15px;
  letter-spacing: 1px;
}

/* 轮播图样式 */
.banner-section {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #004d7a;
}

.banner-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-list {
  display: flex;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.banner-item {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
  transition: transform 1s ease;
}

.banner-item:hover .banner-image,
.banner-item:active .banner-image {
  transform: scale(1.05);
}

.banner-info {
  position: absolute;
  left: 50px;
  bottom: 50px;
  color: white;
  z-index: 10;
}

.banner-info h3 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.banner-info p {
  font-size: 1.2rem;
  line-height: 1.8;
  max-width: 400px;
}

.banner-controls {
  position: absolute;
  top: 50%;
  left: 30px;
  right: 30px;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 10;
}

.control-btn {
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 15px 20px;
  font-size: 1.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.control-btn:hover {
  background: rgba(0,0,0,0.8);
}

.dot-nav {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.dot-nav span {
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.dot-nav span.active {
  width: 30px;
  border-radius: 6px;
  background: white;
}

/* 热门景点样式（3D翻转卡片） */
.hot-spots {
  padding: 80px 20px;
  background: #f8f9fa;
}

.spots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 40px;
}

.spot-card {
  perspective: 1000px;
  height: 400px;
}

.spot-card-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.spot-front,
.spot-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.spot-front {
  background: white;
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.spot-front img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 15px 15px 0 0;
}

.spot-front h3 {
  padding: 20px;
  text-align: center;
  font-size: 1.3rem;
  color: #004d7a;
}

.spot-back {
  background: #004d7a;
  color: white;
  padding: 25px;
  transform: rotateY(180deg);
  border-radius: 15px;
}

.spot-card:hover .spot-card-inner {
  transform: rotateY(180deg);
}

.heritage-badge {
  margin-top: 20px;
  padding: 8px;
  border: 2px solid white;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
}

/* 文化活动时间轴 */
.cultural-events {
  padding: 80px 20px;
  background: linear-gradient(to bottom, #ffffff, #e0f3ff);
}

.events-timeline {
  position: relative;
  height: 500px;
  margin-top: 60px;
  overflow: hidden;
}

.timeline-line {
  position: absolute;
  top: 50%;
  left: 50px;
  right: 50px;
  height: 2px;
  background: #e0e0e0;
  transform: translateY(-50%);
}

.event-card {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

.event-marker {
  width: 24px;
  height: 24px;
  background: #004d7a;
  border-radius: 50%;
  margin: 0 auto 20px;
  box-shadow: 0 0 12px rgba(0,77,122,0.3);
}

.event-content h3 {
  font-size: 1.5rem;
  color: #004d7a;
  margin-bottom: 10px;
}

.event-date {
  font-size: 1.2rem;
  color: #666;
}

.day {
  font-size: 2.5rem;
  color: #004d7a;
  font-weight: bold;
}

.month {
  font-size: 1rem;
  text-transform: uppercase;
  color: #999;
}

/* 移动端适配 */
@media (max-width: 1024px) {
  .banner-section {
    height: 400px;
  }

  .banner-info {
    left: 20px;
    bottom: 20px;
  }

  .banner-info h3 {
    font-size: 1.8rem;
  }

  .spots-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .title-effect {
    font-size: 2.5rem;
  }

  .banner-section {
    height: 300px;
  }

  .events-timeline {
    height: auto;
    padding: 40px 0;
  }

  .event-card {
    position: relative;
    margin: 30px 0;
    left: 0 !important;
    transform: translateY(0);
  }
}

/* 水印样式 */
.watermark {
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0.1;
  z-index: -1;
}
</style>